<template>
  <div class="swiper-container">
    <div class="stack-wrapper">
      <tantan-stack
        :data="cardData"
        :editTitle="editTitle"
        :editable="editable"
        @commit="commit"
        @cancel="cancel"
        @clickScore="clickScore"
        :scores="scores"
        @changeTotalScore="changeTotalScore"
      ></tantan-stack>
    </div>
    <div class="exit-button" @click="cancel"></div>
    <score-selector
      :show="showScoreSelector"
      @cancel="cancelScoreSelector"
      @confirm="confirmScoreSelector"
    ></score-selector>
  </div>
</template>

<script>
import tantanStack from "./tantanStack";
import scoreSelector from "./scoreSelector";
import cloudHandler from "../../../cloud/index";
import { formatDay } from "../../../utils/index";
// 将打卡的所有数据交于该组件管理
export default {
  props: {
    editable: {
      type: Boolean
    },
    cardData: {
      type: Object
    }
  },
  components: {
    tantanStack,
    scoreSelector
  },
  data() {
    return {
      showScoreSelector: false, // 显示分数选择器
      scoreSelectorTarget: "", // 分数选择器指向的target
      listeningScore: "",
      readingScore: "",
      writingScore: "",
      speakingScore: "",
      totalScore: "",
      remark: "",
      cardId: "custom",
      editTitle: "",
      commitData:null
    };
  },
  computed: {
    scores() {
      return {
        listeningScore: this.listeningScore,
        readingScore: this.readingScore,
        writingScore: this.writingScore,
        speakingScore: this.speakingScore
      };
    }
  },
  methods: {
    changeTotalScore(val) {
      this.totalScore = val;
    },
    async commit() {
      if (!this.editable) {
        await this.commitToCloud();
        // 这里加打卡完成后的动效
        this.$emit("commit", this.commitData);
      } else {
        // 编辑模式下，把editObj透传出去
        this.$emit("commit", this.editObj);
      }
    },
    commitToCloud() {
      this.commitData = {
        listeningScore: this.listeningScore,
        readingScore: this.readingScore,
        writingScore: this.writingScore,
        speakingScore: this.speakingScore,
        totalScore: this.totalScore,
        remark: this.remark,
        cardId: this.cardData._id,
        cardType: this.cardData.cardType,
        needScore: this.cardData.needScore,
        createdDay: formatDay(new Date())
      };
      this.$emit('showLoading');
      return cloudHandler.daka(this.commitData)
      .catch(err => {
        console.log(err);
      })
      .finally(() => {
        this.$emit('hideLoading');
      })
    },
    cancel(ev) {
      this.reset();
      this.$emit("cancel");
    },
    reset() {
      this.showScoreSelector = false;
      this.scoreSelectorTarget = "";
      this.listeningScore = "";
      this.readingScore = "";
      this.writingScore = "";
      this.speakingScore = "";
      this.remark = "";
    },
    showScoreSelectorHandle(target) {
      this.scoreSelectorTarget = target;
      this.showScoreSelector = true;
    },
    cancelScoreSelector() {
      this.scoreSelectorTarget = "";
      this.showScoreSelector = false;
    },
    confirmScoreSelector(val) {
      this[this.scoreSelectorTarget] = val;
      this.cancelScoreSelector();
    },
    clickScore(type) {
      this.showScoreSelectorHandle(type);
    }
  }
};
</script>

<style lang="less">
.swiper-container {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
}
// .container-left {
//     position: absolute;
//     top: 0;
//     bottom: 0;
//     left: 0;
//     right: 50%;
//     background: rgba(0,0,0,.5);
//     // background-image: linear-gradient(to left,rgba(0,0,0,.5), rgba(7, 193, 96, 1));
// }
// .container-right {
//     position: absolute;
//     top: 0;
//     bottom: 0;
//     left: 50%;
//     right: 0;
//     background-image: linear-gradient(to right,rgba(0,0,0,.5), rgba(7, 193, 96, 1));
// }
// rgba(238, 10, 36, 1)
// 7 193 96

.stack-wrapper {
  margin: 0 auto;
  position: relative;
  z-index: 11;
  width: 296px;
  height: 429px;
  border-radius: 20px;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.exit-button {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 50%;
  margin-left: -25px;
  bottom: 30px;
  background: url("http://cdn.ielts.group/垃圾桶@3x.png") center
    center no-repeat;
  background-size: cover;
}
</style>